<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../js/layui/css/layui.css"/>
<script type="text/javascript" src="../js/layui/layui.js"></script>
<style type="text/css">
	.layui-table-cell {/* 设置表格高度 */
			height: 60px;
			line-height: 60px;
		}
		.layui-table img {/*设置图片高度  */
			width: 50px;
			height: 50px;
			}
</style>
</head>
<body>
	<div id="my_d" style="display:none;">
		<form id="my_F" class="layui-form" onsubmit="return false;">
			<label class="layui-form-label">请选择快递::</label>
			    <div class="layui-input-inline">
			      <select id="eSel" lay-filter="aihao">
			    
			        <option value="韵达">韵达</option>
			        <option value="EMS">EMS</option>
			        <option value="京东快递">京东快递</option>
			        <option value="中通">中通</option>
			        <option value="圆通">圆通</option>
			        <option value="申通">申通</option>
			        <option value="百世快递">百世快递</option>
			        <option value="顺丰">顺丰</option>
			        <option value="宅急送">宅急送</option>
			      </select>
			    </div>
			    
			    <div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 运费:</label>
				<div class="layui-input-inline">
					<input type="number" id="ePrice" value="0" class="layui-input"><h6 style="color: gray;">*运费默认0元</h6>
				</div>
			</div>
			<div class="layui-input-inline" style="width: 80px">
				<button style="margin-left: 130px; margin-top: 50px;" class="layui-btn" lay-submit="" lay-filter="faHuo">
					<i class="layui-icon">&#xe608;</i>发货
				</button>
			</div>
		</form>
	</div>
	
	
	
	<form id="myForm" class="layui-form" onsubmit="return false;">
		 
		  <div class="layui-form-item">
		  	<label class="layui-form-label">姓名:</label>
		  		<div class="layui-input-inline" style="width:120px">
                       <input type="text" id="uName" name="uName"  placeholder="收货人姓名名" class="layui-input">
                </div>
		    <label class="layui-form-label">状态信息:</label>
		    <div class="layui-input-inline">
		      <select id="sel" name="status" lay-filter="aihao">
		      	<option value=""></option>
		        <option value="已发货">已发货</option>
		        <option value="未发货">未发货</option>
		        <option value="已收货">已收货</option>
		        <option value="未收货">未收货</option>
		      </select>
		    </div>
		     <div class="layui-input-inline">
			     <button class="layui-btn" lay-submit lay-filter="chaxun">查询</button>
			 </div>
		  </div>
	</form>
	<table id="demo" lay-filter="test"></table>
	 <script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="fh">一键发货</a>
  		
	</script>
	<script>
		var form,table,layer,$;
		layui.use(['table','form','layer'], function(){
		  table = layui.table;
		  form = layui.form;
		  layer = layui.layer;
		  $ = layui.$;
		  
		  //第一个实例
		  table.render({
		    elem: '#demo'
		    ,url: '../getOrderByWhere' //数据接口
		    ,id:'myTab'
		    ,page: true //开启分页
		    ,cols: [[ //表头
		      {field: 'o_id', title: '订单号', width:100, sort: true, fixed: 'left'}
		      ,{field: 'img', title: '商品图片',templet:function(obj){return obj.books.img},templet: '<div><img style="height:100px;" src="../images/{{d.books.img}}"/></div>'}
		      ,{field: 'name', title: '商品名',templet:function(obj){return obj.books.name}}
		      ,{field: 'totalMoney', title: '总价'}
		      ,{field: 'number', title: '数量'} 
		      ,{field: 'status', title: '状态'}
		      ,{field: '', title: '收货人姓名',templet:function(obj){return obj.user.username}}
		      ,{field: '', title: '手机',templet:function(obj){return obj.user.phone}}
		      ,{field: '', title: '邮箱',templet:function(obj){return obj.user.email}}
		      ,{field: 'orderDate', title: '时间'}
		      ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
		      
		    ]]
		  });
		//监听工具条 
		  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
		    var data = obj.data; //获得当前行数据
		    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
		   console.log(obj);
		    if(layEvent === 'fh'){ //查看
		   		if (data.status!='未发货') {
					layer.alert("当前订单状态不能发货");
				} else {
					layer.open({
						type : 1,
						content : $('#my_d'),
						//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
						area : [ '350px', '250px' ]
					});
					form.on('submit(faHuo)', function(){
						if ($("#ePrice").val()<0) {
							layer.alert("运费不能为负数");
						} else {
							 $.post("../getExpress",{
								 oId:data.o_id,
								 eName:$("#eSel option:checked").text(),
								 ePrice:$("#ePrice").val()
							 },function(res){
								 if (res.code=="0") {
									 var st="已发货";
								      $.post("../xgOrderStatus",{
								    	  o_id:data.o_id,
								    	  status:st
								      },function(res2){
								    	  if (res2.code=="0") {
											layer.msg(res2.msg);
											table.reload("myTab");
											layer.closeAll();
										} else {
											layer.msg(res2.msg);
										}
								      },"json");
								} else {
									layer.msg(res.msg);
								}
							 },"json");
						}
						
						  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
						});
				}
		      
		    } 
		  });
		
		  form.on('submit(chaxun)', function(data){
			  var sta=$("#sel option:checked").text();
			  console.log(sta);
			//这里以搜索为例
			  table.reload('myTab',{
			    where: { //设定异步数据接口的额外参数，任意设
			      status: sta,
			      uName:$("#uName").val()
			    }
			    ,page: {
			      curr: 1 //重新从第 1 页开始
			    }
			  });
			  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
		});
	</script>
</body>
</html>